<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .box {
            width: 250px;
        }
        ul {
            height: 0;
            cursor: pointer;
            overflow: hidden;
            transition: height .5s linear;
        }

        li {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 12px;
            line-height: 30px;
            padding-left: 30px;
            background-color: #FBF0D2;
            transition: all .7s ease 0s;
        }

        li:hover {

            color: azure;
            background-color: #e94f12;
        }

        li:last-child {
            border: none
        }

        h4 {
            background: rgb(255, 250, 232);
            cursor: pointer;
            padding: 8px 4px;
            font-size: 13px;
            font-weight: bold;
            padding-left: 20px;
            border-bottom: 1px solid #ecdfcc;

        }
    </style>
</head>

<body>

    <div class="box">

    </div>
    <script>
        var data = [{
            title: "语言",
            list: ["Java", "javascript", "python"],
            isShow: false,
        }, {
            title: "运动",
            list: ["足球", "羽毛球", "篮球"],
            isShow: false,
        }, {
            title: "乐器",
            list: ["钢琴", "手风琴"],
            isShow: false,
        }, {
            title: "男装",
            list: ["T恤", "皮衣夹", "西服套装"],
            isShow: false,
        }, {
            title: "配饰",
            list: ["女士围巾", "大衣毛衣"],
            isShow: false,
        }];

        var str = "";
        data.forEach(function (item) {
            str += ` <div class="list">
                <h4>${item.title}</h4>
                <ul>`;
            var str1 = "";
            for (let i = 0; i < item.list.length; i++) {
                str1 += `<li>${item.list[i]}</li>`;
            }
            console.log(str1);
            str += str1 + "</ul></div>"
        })
        var box = document.querySelector(".box");
        box.innerHTML = str;

        var h4s = document.querySelectorAll('h4');
        var uls = document.querySelectorAll('ul');
        for (var i = 0; i < h4s.length; i++) {
            // 设置自定义属性 给每个标签都添加一个 只是是当前标签的索引值
            h4s[i].index = i;
            h4s[i].onclick = function () {
                // 获取当前点击h4的索引值
                // console.log(this.index);
                var n = this.index;
                // 判断相对应索引值的data中的isShow属性如果是false 就执行
                if (!data[n].isShow) {
                    // 执行下拉的显示
                    for (var k = 0; k < uls.length; k++) {
                        uls[k].style.height = "0";
                        data[k].isShow = false;
                    }
                    var num = uls[n].children.length * uls[n].children[0].offsetHeight;
                    uls[n].style.height = num + "px";
                    data[n].isShow = true;
                } else {
                    uls[n].style.height = "0px";
                    data[n].isShow = false;
                }

            }

        }

    </script>
</body>

</html>